<template>
  <div>
      <div style="text-align: center;padding: 12px 0px;">
          <img style="vertical-align: middle;position: absolute;left: 15px;top:12px" @click="Walletreturn()" src="../../assets/img/heiRaturn.svg" alt="">
          <span style="font-size: 16px;color: #333;font-weight: bold;">充值记录</span>
      </div>
      <div>
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <ul class="listCla">
                    <li v-for="val in dataList">
                        <div style="color:#FDC136;">
                            <span style="font-size: 16px;">{{val.integral}}SQT</span>
                            <span style="float:right;">已完成</span>
                            <!-- <span style="float:right;color:#989898;">已取消</span> -->
                        </div>
                        <div style="color:#989898;margin-top:4px;">
                            <span>充值 ¥{{val.rmb}}</span>
                            <span style="float:right;">{{val.createTime}}</span>
                        </div>
                    </li>
                </ul>
            </van-list>
      </div>
  </div>
</template>

<script>
    import { List } from 'vant';
    export default {
        name: "rechargeRecord",
        data(){
           return{
                loading: false,
                finished: false,
                num:0,
                total:0,
                userId:'',
                dataList:[]
           }
        },
        components:{
           [List.name]:List,
        },
        mounted() {
            this.userId = localStorage.getItem('user_id');
        },
        methods:{
            onLoad(){
                var that = this;
                that.num++;
                that.$http.post(that.utils.config + "/netmall/app/person/api/getUserIntegralExchangeDetails?userId=" + that.userId+"&pageNo="+that.num+"&pageSize=10").then((data) => {
                    if (data.data.success) {
                        that.total = data.data.result.total;
                        for(let i=0;i<data.data.result.records.length;i++){
                            that.dataList.push(data.data.result.records[i]);
                            that.loading = false;
                        }
                        if(that.total == that.dataList.length){
                            that.finished = true;
                        }
                    }
                })
            },
            Walletreturn(){
                this.$router.push('/integralTopUp');
            },
        }
    }

</script>

<style scoped>
    .listCla{
        padding:0px 15px;
    }
    .listCla li{
        padding: 16px 0px;
        font-size: 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
</style>
